<template>
  <div class="headBar" :style="{'background':themeColor}" :class="collapse?'position-collapse-left':'position-left'">
    <!-- 导航收缩 -->
    <span class="hamBurg">
      <el-menu class="el-menu-demo" :background-color="themeColor" text-color="#fff" :active-text-color="themeColor" mode="horizontal">
        <el-menu-item index="1" @click="onCollapse">
          <hamburger :isActive="collapse"></hamburger>
        </el-menu-item>
      </el-menu>
    </span>
    <!-- 导航菜单 -->
    <span class="navBar">
      <el-menu :default-active="activeIndex" class="el-menu-demo" :background-color="themeColor" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="selectNavBar()">
        <el-menu-item index="1" @click="$router.push('/home')">{{$t('common.home')}}</el-menu-item>
        <el-menu-item index="2" @click="openWindow('https://gitee.com/liuge1988/kitty/wikis/Home')">{{$t("common.doc")}}</el-menu-item>
        <el-menu-item index="3" @click="openWindow('https://www.cnblogs.com/xifengxiaoma/')">{{$t("common.blog")}}</el-menu-item>
      </el-menu>
    </span>
    <!-- 工具栏 -->
    <span class="toolBar">
      <el-menu class="el-menu-demo" :background-color="themeColor" text-color="#14889A" :active-text-color="themeColor" mode="horizontal">
        <!--  主题切换  -->
        <el-menu-item index="1">
          <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange" />
        </el-menu-item>
        <!-- 语言切换 -->
        <el-menu-item index="2" v-popover:popover-lang>
          <li style="color:#fff;" class="fa fa-language fa-lg"></li>
          <el-popover ref="popover-lang" placement="bottom-start" trigger="click" v-model="langVisible">
            <div class="lang-item" @click="changeLanguage('zh_cn')">简体中文</div>
            <div class="lang-item" @click="changeLanguage('en_us')">English</div>
          </el-popover>
        </el-menu-item>
        <!-- 我的私信 -->
        <el-menu-item index="3" v-popover:popover-message>
          <el-badge :value="5" :max="99" class="badge">
            <li style="color: #ffffff;" class="fa fa-envelope-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-message" placement="bottom-end" trigger="click">
            <message-panel></message-panel>
          </el-popover>
        </el-menu-item>
        <!-- 系统通知 -->
        <el-menu-item index="4" v-popover:popover-notice>
          <el-badge :value="4" :max="99" class="badge">
            <li style="color: #ffffff;" class="fa fa-bell-o fa-lg"></li>
          </el-badge>
          <el-popover ref="popover-notice" placement="bottom-end" trigger="click">
            <notice-panel></notice-panel>
          </el-popover>
        </el-menu-item>
        <!-- 用户信息 -->
        <el-menu-item index="5" v-popover:popover-personal>
          <span  class="userInfo">
            <img :src="user.avatar" alt="" />
            {{user.nickName}}
          </span>
          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
            <personal-panel :user="user"></personal-panel>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Hamburger from "@/components/HeadBar/Hamburger";
import ThemePicker from "@/components/HeadBar/ThemePicker";
import MessagePanel from "@/components/HeadBar/MessagePanel";
import NoticePanel from "@/components/HeadBar/NoticePanel";
import PersonalPanel from "@/components/HeadBar/PersonalPanel";

export default {
  name: "HeadBar",
  components:{
    Hamburger,
    ThemePicker,
    MessagePanel,
    NoticePanel,
    PersonalPanel
  },
  data(){
    return{
      user:{},
      activeIndex: '1',
      langVisible: false
    }
  },
  methods:{
    openWindow(url) {
      window.open(url)
    },
    selectNavBar(key,keyPath){
      console.log(key,keyPath)
    },
    // 折叠导航栏
    onCollapse: function (){
      this.$store.commit('onCollapse')
    },
    // 切换主题
    onThemeChange: function (themeColor){
      this.$store.commit('setThemeColor',themeColor)
    },
    // 语言切换方法
    changeLanguage(lang){
      lang = lang === '' ? 'zh_cn' : lang
      this.$i18n.locale = lang
      this.langVisible = false
    }
  },
  mounted(){
    let user = sessionStorage.getItem('user')
    if (user){
      let params = {name:user}
      this.$api.userInfo.findByName(params).then((res) => {
        if (res.code === 200){
          this.user = res.data
          this.user.avatar = require('@/assets/user.png')
        }
      })
    }
  },
  computed:{
    ...mapState({
      themeColor: state=>state.app.themeColor,
      collapse: state=>state.app.collapse
    })
  }
}
</script>

<style scoped lang="scss">
.headBar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: 60px;
  line-height: 60px;
  border-color: rgba(180,190,190,0.8);
  border-left-width: 1px;
  border-left-style: solid;
}

.hamBurg{
  float: left;
}

.navBar {
  float: left;
}

.toolBar{
  float: right;
}

.lang-item {
  font-size: 16px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}
.lang-item:hover {
  font-size: 18px;
  background: #b0d6ce4d;
}
.userInfo {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0 10px 10px;
    float: right;
  }
}
.badge {
  line-height: 18px;
}
.position-left {
  left: 200px;
}
.position-collapse-left {
  left: 65px;
}
</style>
